<script setup lang="ts">
import { commonStore } from '@/stores/commonStore/commonStore'
import { ref } from 'vue'
import { getImgPath } from '@/util/bussinessTool'
const store = commonStore()
const active = ref(0)
const tabbarList = [{
  active: getImgPath('../assets/static/tabbar/home4_select.png'),
  inactive: getImgPath('../assets/static/tabbar/home4.png'),
  name: '首页',
  to: '/home'
}, {
  active: getImgPath('../assets/static/tabbar/worker4_select.png'),
  inactive: getImgPath('../assets/static/tabbar/worker5.png'),
  name: '技师',
  to: '/worker'
}, {
  active: getImgPath('../assets/static/tabbar/order4_select.png'),
  inactive: getImgPath('../assets/static/tabbar/order4.png'),
  name: '订单',
  to: '/orderList'
}, {
  active: getImgPath('../assets/static/tabbar/my4_select.png'),
  inactive: getImgPath('../assets/static/tabbar/my4.png'),
  name: '我的',
  to: '/my'
}] 
</script>

<template>
  <van-tabbar route v-model="active" :active-color="store.tabbarColor" :placeholder="true">
    <van-tabbar-item v-for="item in tabbarList" :to="item.to" replace>
      <span>{{ item.name }}</span>
      <template #icon="props">
        <img :src="props.active ? item.active : item.inactive" />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>
